<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-08-07 15:31:59
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-08-07 15:51:53
 * @FilePath: \web-components-box\components\Player\PreviewVideo.vue
 * @Description: 视频预览组件
-->
<script setup lang="ts">
import Player from './index.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  src: {
    type: String,
    required: true,
    default: '',
  },
})

defineEmits(['exitPreview'])

const config = ref({
  id: 'mse',
  url: props.src,
  height: '100%',
  width: '100%',
  autoplayMuted: true,
  autoplay: true,
})
watch(
  () => props.src,
  () => {
    if (props.src)
      config.value.url = props.src
  },
  {
    immediate: true,
  },
)

</script>

<template>
  <div class="screen-preview">
    <a-modal
      :visible="props.visible" :width="900" :mask-closable="false"
      :render-to-body="false" :footer="false" :hide-title="true"
      @cancel="$emit('exitPreview', true)"
    >
      <Player
        v-if="props.visible && props.src !== undefined"
        :config="config"
      />
    </a-modal>
  </div>
</template>

<style scoped lang="less">
.screen-preview {
  :deep(.arco-modal-body) {
    padding: 0px;
    height: 450px;
  }
}
</style>

